<template>
  <div class="resume-detail">
    <div class="detail-header">
      <div class="header-left">
        <el-button type="text" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <div class="resume-title">{{ resumeData?.title || '简历详情' }}</div>
      </div>
      <div class="header-right">
        <el-button @click="handleEdit" v-if="resumeData?.resume_type === 'generated'">
          <el-icon><Edit /></el-icon>
          编辑
        </el-button>
        <el-button type="primary" @click="handleDownload" :loading="downloading">
          <el-icon><Download /></el-icon>
          下载
        </el-button>
      </div>
    </div>

    <div class="detail-content" v-loading="loading">
      <el-card v-if="resumeData">
        <div class="resume-info">
          <div class="info-section">
            <h3>基本信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">简历标题：</span>
                <span class="value">{{ resumeData.title }}</span>
              </div>
              <div class="info-item">
                <span class="label">简历类型：</span>
                <el-tag :type="resumeData.resume_type === 'uploaded' ? 'warning' : 'success'">
                  {{ resumeData.resume_type === 'uploaded' ? '上传简历' : '在线生成' }}
                </el-tag>
              </div>
              <div class="info-item">
                <span class="label">状态：</span>
                <el-tag :type="getStatusTagType(resumeData.status)">
                  {{ getStatusLabel(resumeData.status) }}
                </el-tag>
              </div>
              <div class="info-item" v-if="resumeData.template_name">
                <span class="label">使用模板：</span>
                <span class="value">{{ resumeData.template_name }}</span>
              </div>
              <div class="info-item" v-if="resumeData.resume_type === 'generated'">
                <span class="label">完成度：</span>
                <el-progress 
                  :percentage="resumeData.completion_rate" 
                  :stroke-width="6"
                  style="width: 200px"
                />
              </div>
              <div class="info-item">
                <span class="label">创建时间：</span>
                <span class="value">{{ formatTime(resumeData.created_at) }}</span>
              </div>
              <div class="info-item">
                <span class="label">更新时间：</span>
                <span class="value">{{ formatTime(resumeData.updated_at) }}</span>
              </div>
            </div>
          </div>

          <!-- 上传的文件信息 -->
          <div class="info-section" v-if="resumeData.uploaded_file">
            <h3>文件信息</h3>
            <div class="file-info">
              <div class="file-item">
                <el-icon class="file-icon"><Document /></el-icon>
                <div class="file-details">
                  <div class="file-name">{{ getFileName(resumeData.uploaded_file) }}</div>
                  <div class="file-actions">
                    <el-button type="text" @click="handlePreview">
                      <el-icon><View /></el-icon>
                      预览
                    </el-button>
                    <el-button type="text" @click="handleDownload">
                      <el-icon><Download /></el-icon>
                      下载
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 生成的文件信息 -->
          <div class="info-section" v-if="resumeData.generated_file">
            <h3>生成的简历</h3>
            <div class="file-info">
              <div class="file-item">
                <el-icon class="file-icon"><Document /></el-icon>
                <div class="file-details">
                  <div class="file-name">{{ getFileName(resumeData.generated_file) }}</div>
                  <div class="file-actions">
                    <el-button type="text" @click="handlePreview">
                      <el-icon><View /></el-icon>
                      预览
                    </el-button>
                    <el-button type="text" @click="handleDownload">
                      <el-icon><Download /></el-icon>
                      下载
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 审核信息 -->
          <div class="info-section" v-if="resumeData.reviewer_name || resumeData.review_comments">
            <h3>审核信息</h3>
            <div class="review-info">
              <div class="info-item" v-if="resumeData.reviewer_name">
                <span class="label">审核人：</span>
                <span class="value">{{ resumeData.reviewer_name }}</span>
              </div>
              <div class="info-item" v-if="resumeData.review_date">
                <span class="label">审核时间：</span>
                <span class="value">{{ formatTime(resumeData.review_date) }}</span>
              </div>
              <div class="info-item" v-if="resumeData.review_comments">
                <span class="label">审核意见：</span>
                <div class="review-comments">{{ resumeData.review_comments }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { resumeApi, type Resume, RESUME_STATUS_OPTIONS } from '@/api/resume'
import { formatTime } from '@/utils/format'

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const downloading = ref(false)
const resumeData = ref<Resume | null>(null)

// 简历ID
const resumeId = computed(() => {
  return parseInt(route.params.id as string)
})

// 获取状态标签类型
const getStatusTagType = (status: string): string => {
  const types: Record<string, string> = {
    draft: 'info',
    in_progress: 'warning',
    submitted: 'primary',
    under_review: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return types[status] || 'info'
}

// 获取状态标签
const getStatusLabel = (status: string): string => {
  const option = RESUME_STATUS_OPTIONS.find(s => s.value === status)
  return option ? option.label : status
}

// 获取文件名
const getFileName = (url: string): string => {
  return url.split('/').pop() || '简历文件'
}

// 获取简历详情
const fetchResumeDetail = async () => {
  loading.value = true
  try {
    const response = await resumeApi.getResumeDetail(resumeId.value)
    const data = response.data || response
    resumeData.value = data
  } catch (error) {
    ElMessage.error('获取简历详情失败')
  } finally {
    loading.value = false
  }
}

// 处理编辑
const handleEdit = () => {
  if (resumeData.value?.resume_type === 'generated') {
    router.push(`/resume/builder/${resumeId.value}`)
  }
}

// 处理下载
const handleDownload = async () => {
  downloading.value = true
  try {
    const response = await resumeApi.downloadResume(resumeId.value)
    const data = response.data || response
    if (data.download_url) {
      window.open(data.download_url, '_blank')
    }
  } catch (error) {
    ElMessage.error('下载失败')
  } finally {
    downloading.value = false
  }
}

// 处理预览
const handlePreview = () => {
  // TODO: 实现文件预览功能
  ElMessage.info('预览功能开发中')
}

// 返回
const goBack = () => {
  // 添加时间戳参数强制刷新列表页面
  router.push({
    path: '/resume/my',
    query: { refresh: Date.now().toString() }
  })
}

// 生命周期
onMounted(() => {
  fetchResumeDetail()
})
</script>

<style lang="scss" scoped>
.resume-detail {
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;

      .resume-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-color-primary);
      }
    }

    .header-right {
      display: flex;
      gap: 12px;
    }
  }

  .detail-content {
    .resume-info {
      .info-section {
        margin-bottom: 32px;

        &:last-child {
          margin-bottom: 0;
        }

        h3 {
          font-size: 18px;
          font-weight: 600;
          color: var(--text-color-primary);
          margin: 0 0 16px 0;
          padding-bottom: 8px;
          border-bottom: 2px solid var(--color-primary);
        }

        .info-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 16px;

          .info-item {
            display: flex;
            align-items: center;

            .label {
              font-weight: 500;
              color: var(--text-color-secondary);
              margin-right: 8px;
              min-width: 80px;
            }

            .value {
              color: var(--text-color-primary);
            }
          }
        }

        .file-info {
          .file-item {
            display: flex;
            align-items: center;
            padding: 16px;
            border: 1px solid var(--border-color-light);
            border-radius: 8px;
            background: var(--fill-color-extra-light);

            .file-icon {
              font-size: 32px;
              color: var(--color-primary);
              margin-right: 16px;
            }

            .file-details {
              flex: 1;

              .file-name {
                font-size: 16px;
                font-weight: 500;
                color: var(--text-color-primary);
                margin-bottom: 8px;
              }

              .file-actions {
                display: flex;
                gap: 12px;
              }
            }
          }
        }

        .review-info {
          .info-item {
            margin-bottom: 12px;
            align-items: flex-start;

            &:last-child {
              margin-bottom: 0;
            }

            .review-comments {
              padding: 12px;
              background: var(--fill-color-extra-light);
              border-radius: 6px;
              line-height: 1.6;
              color: var(--text-color-primary);
              margin-top: 8px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .resume-detail {
    .detail-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;

      .header-right {
        width: 100%;
        justify-content: flex-end;
      }
    }

    .detail-content {
      .resume-info {
        .info-section {
          .info-grid {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}
</style>
